<template>
  <view class="items">
    <!-- 有消息时显示消息列表 -->
    <navigator
      v-for="item in chatList"
      :key="item.id"
      :url="`/discoverypages/chat?id=${item.conversationId}&projectId=${item.projectId}&merchantopenId=${item.senderId}&receiverId=${item.senderId}`"
    >
      <view class="item">
        <tn-avatar size="lg" :src="item.headSculpture"></tn-avatar>
        <view class="col2">
          <view class="row1">
            <text class="merchant">{{item.nickname}}</text>
            <view class="divider"></view>
            <text class="projectName">{{ item.title || '暂无标题' }}</text>
          </view>
          <text class="row2 content">{{ item.newMsg || '暂无描述' }}</text>
        </view>
        <view class="col3">
          <text class="time">{{ formatDate(item.lastTime) }}</text>
           <tn-badge
            class="count"
            backgroundColor="rgba(230, 113, 125, 0.83)"
            fontColor="#FFF"
            fontSize="22"
          >
            {{ item.messageNum }}
          </tn-badge>
        </view>
      </view>
    </navigator>
    
    <!-- 无消息时显示占位符 -->
    <view v-if="chatList.length === 0" class="empty-placeholder">
      <image 
        class="empty-icon" 
        src="https://lemawuyou.oss-cn-shanghai.aliyuncs.com/client/images/empty-message.png"
        mode="aspectFit"
      ></image>
      <text class="empty-text">暂无消息</text>
      <text class="empty-desc">您还没有收到任何消息</text>
    </view>
  </view>
</template>

<script>
import { getCustomerMessageList } from "@/api/message";

export default {
  name: "Chats",
  data() {
    return {
      chatList: [],
      userInfoObj: {},
    };
  },
  mounted() {
    this.getChatList();
    this.userInfoObj = this.$store.getters.getUserInfo;
  },
  methods: {
    async getChatList() {
      try {
        const res = await getCustomerMessageList();
        if (res.code === 200) {
          this.chatList = res.data || [];
        } else {
          console.log("查询消息列表失败", res.msg);
          this.chatList = [];
        }

        console.log("chatList", this.chatList);
      } catch (e) {
        console.log("查询消息列表失败", e);
        this.chatList = [];
      }
    },
    formatDate(dateString) {
      if (!dateString) return '暂无时间';

      try {
        const now = new Date();
        const msgDate = new Date(dateString);

        // 计算时间差
        const diffTime = now.getTime() - msgDate.getTime();
        const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));

        if (diffDays === 0) {
          // 今天，显示时间
          const timePart = dateString.split(' ')[1];
          return timePart || dateString;
        } else if (diffDays === 1) {
          // 昨天
          return '昨天';
        } else if (diffDays < 7) {
          // 一周内，显示几天前
          return `${diffDays}天前`;
        } else {
          // 超过一周，显示日期
          return dateString.split(' ')[0] || dateString;
        }
      } catch (e) {
        // 如果日期解析失败，返回原始字符串
        return dateString.split(' ')[0] || dateString;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.items,
.col2,
.col3 {
  display: flex;
  flex-direction: column;
}

.items {
  background-color: #fff;
}

.item {
  display: flex;
  gap: 26rpx;
  padding: 38rpx 0 26rpx 0;
  margin: 0 34rpx;
  border-bottom: 2rpx solid #f3f4f6;
}

.col2 {
  flex: 1;
  gap: 10rpx;
  overflow-x: hidden;
}

.col2 .row1 {
  display: flex;
  align-items: center;
  gap: 17rpx;

  .merchant {
    font-size: 32rpx;
    font-weight: 500;
    line-height: 48rpx;
    white-space: nowrap;
  }

  .divider {
    width: 41rpx;
    height: 4rpx;
    background-color: #d8d8d8;
  }

  .projectName {
    font-size: 28rpx;
    font-weight: 500;
    line-height: 48rpx;
    white-space: nowrap;
  }
}

.col2 .row2 {
  font-size: 28rpx;
  font-weight: 500;
  line-height: 48rpx;
  color: #575b66;
}

.col3 {
  align-items: center;
  gap: 10rpx;

  .time {
    font-size: 26rpx;
    font-weight: 500;
    line-height: 48rpx;
    white-space: nowrap;
    color: #666666;
  }

  .price {
    display: flex;
    align-items: center;
    justify-content: center;

    .price-text {
      font-size: 28rpx;
      font-weight: 600;
      color: #007AFF;
      white-space: nowrap;
    }
  }
}

/* 空状态占位符样式 */
.empty-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80rpx 0;
  background-color: #fff;
  
  .empty-icon {
    width: 80rpx;
    height: 80rpx;
    margin-bottom: 16rpx;
    opacity: 0.6;
  }
  
  .empty-text {
    font-size: 28rpx;
    font-weight: 500;
    color: #999999;
    margin-bottom: 8rpx;
  }
  
  .empty-desc {
    font-size: 24rpx;
    color: #cccccc;
    line-height: 32rpx;
  }
}
</style>